import store from '@/store'

/**
 * 配置css样式
 * @param dom dom元素
 * @param defaultOption 初始css样式
 * @param cssOption 新增css样式
 */
const configCssStyles = (dom, defaultOption = {}, cssOption = {}) => {
  // 合并属性
  cssOption = { ...defaultOption, ...cssOption }
  // 循环置换样式属性
  for (let cssKey in cssOption) {
    if (dom.style.hasOwnProperty(cssKey)) {
      dom.style[cssKey] = cssOption[cssKey]
    }
  }
}

/**
 * 图片创建工厂
 * @param imgSrc 图片地址
 * @param id 按钮ID
 * @param cssOption css自定义配置
 * @returns {HTMLImageElement} 图片创建结果
 */
const imageCreator = (imgSrc, id, cssOption = {}) => {
  // 创建图片
  let img = new Image()
  // 赋值图片地址
  img.src = imgSrc
  // 保存按钮ID
  img.setAttribute('data-id', id)
  // 图片加载成功
  img.onload = function() {}
  // 图片加载失败
  img.onerror = function() {
    console.error('图片加载失败')
  }
  const defaultOption = {
    width: '24px',
    height: '24px',
    boxSizing: 'content-box',
    paddingLeft: '5px'
  }
  // 配置css样式
  configCssStyles(img, defaultOption, cssOption)
  // 返回图片节点
  return img
}

/**
 * 文本创建工厂
 * @param text 文本内容
 * @param id 按钮ID
 * @param cssOption css自定义配置
 * @returns {HTMLSpanElement} 文本创建结果
 */
const textCreator = (text, id, cssOption = {}) => {
  // 创建文本节点
  const span = document.createElement('span')
  // 设置文本
  span.innerText = text
  // 保存事件ID
  span.setAttribute('data-id', id)
  // 默认配置
  const defaultOption = {
    fontSize: '14px',
    boxSizing: 'content-box',
    paddingLeft: '5px'
  }
  // 配置css样式
  configCssStyles(span, defaultOption, cssOption)
  // 返回文本节点
  return span
}

// 清除节点
const clearNodes = () => {
  // 清空之前的
  Array.from(store.state.base.navBarRightRef.childNodes).forEach(node => {
    node.remove()
  })
}

/**
 * 配置导航栏右侧操作栏
 * @param menuOption 配置数组 Array
 */
export const setOptionMenu = menuOption => {
  // 清除所有节点
  clearNodes()
  // 保存配置数组
  store.commit('base/SET_NAV_OPTION', menuOption)
  // 说明是单个按钮
  menuOption.forEach(menu => {
    if (menu.type === 'text') {
      // 是文本按钮
      store.state.base.navBarRightRef.appendChild(textCreator(menu.content, menu.id, (menu.cssOption = {})))
    } else {
      // 是图标按钮
      store.state.base.navBarRightRef.appendChild(imageCreator(menu.content, menu.id, (menu.cssOption = {})))
    }
  })
}

// 隐藏导航栏右侧操作栏
export const hideOptionMenu = () => {
  // 清除所有节点
  clearNodes()
  // 重置导航栏配置
  store.commit('base/SET_NAV_OPTION', [])
}
